<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素权重</title>
		<style>
			/*
				ID的权限大于class
				id：100
				class : 10
			*/
			/* #hot{
				color: #008000;
			}
			
			.color{
				color: red;
			}
			 */
			
			/*
				属性权重实例 权重 0021
			*/
		   h2[class="color"][id]{
			   color: red;
		   }
		   
		   /*
		   属性权重 0012
		   */
		  
		  /*
		  			强制优先级
		  */
		   article h2[class='color']{
			   color: blue!important;
		   }
		   
		   /*100*/
		   #hot{
		   	color: blue;
		   }
		   
		   
		   /*
			行级权重的优先级是最高的  1000
		   */
		  
		  /*
		  两条规则的权限是一样的，默认就是用第二个规则，如果第一个规则使用了important，提升了权限,所以就被使用了
		  */
		  
		  
		  
		 
		  
			
		</style>
	</head>
	<body>
	<article>
		<h2 class="color" id="hot" style="color: green;">HDCMS</h2>
	</article>
	</body>
</html>
